<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <title>主页</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/iscroll.js"></script>
    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="./js/utils.js"></script>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <link rel="stylesheet" href="./css/sliding.css" type="text/css">
</head>
<body>

    <!-- 主界面 -->
    <div class="wrapper" id="wrapper">
        <ul class="clearfix pageList" id="pageList">
            <li class="none" id="pageCache">
                <div class="contentWrapper" name="contentWrapper">
                    <ul class="contentList" name="contentList">

                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <!-- 10个 -->

                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <!-- 10个 -->


                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <!-- 10个 -->

                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                            <img src="">
                            <div class="price none">
                                <i class="priceIcon"></i>
                                <span class="priceNumber" name="priceNumber"></span>
                            </div>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <li>
                        </li>
                        <!-- 10个 -->
                    </ul>

                    <section class="cr-container contentAds" name="contentAds">
                        <input type="radio" class="cr-selector-img-1" checked/>
                        <label class="cr-label-img-1 first-label">1</label>

                        <input type="radio" class="cr-selector-img-2" />
                        <label class="cr-label-img-2">2</label>

                        <input type="radio" class="cr-selector-img-3" />
                        <label class="cr-label-img-3">3</label>

                        <input type="radio" class="cr-selector-img-4" />
                        <label class="cr-label-img-4">4</label>

                        <div class="clr"></div>
                        <div class="cr-bgimg">
                            <div>
                                <span>Slice 1 - Image 1</span>
                                <span>Slice 1 - Image 2</span>
                                <span>Slice 1 - Image 3</span>
                                <span>Slice 1 - Image 4</span>
                            </div>
                            <div>
                                <span>Slice 2 - Image 1</span>
                                <span>Slice 2 - Image 2</span>
                                <span>Slice 2 - Image 3</span>
                                <span>Slice 2 - Image 4</span>
                            </div>
                            <div>
                                <span>Slice 3 - Image 1</span>
                                <span>Slice 3 - Image 2</span>
                                <span>Slice 3 - Image 3</span>
                                <span>Slice 3 - Image 4</span>
                            </div>
                            <div>
                                <span>Slice 4 - Image 1</span>
                                <span>Slice 4 - Image 2</span>
                                <span>Slice 4 - Image 3</span>
                                <span>Slice 4 - Image 4</span>
                            </div>
                        </div>
                        <!--
                        <div class="cr-titles">
                            <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
                            <h3><span>Adventure</span><span>Where the fun begins</span></h3>
                            <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
                            <h3><span>Serenity</span><span>When silence touches nature</span></h3>
                        </div>
                        -->
                        <div class="qrCode">
                            <i class="qrCodeBtn" name="qrCodeBtn"></i>
                            <i class="favBtn" name="favBtn"></i>
                        </div>
                    </section>
                </div>
            </li>
        </ul>
    </div>

    <!-- 当有弹出窗口时的覆盖层 -->
    <div class="mask none" id="mask">
    </div>

    <!-- 订单按钮 -->
    <div class="orderBtn" id="orderBtn">
        <p><i class="cartIcon"></i>购物车<span id="orderCount">0</span>件&nbsp;&nbsp;&nbsp;&nbsp;结算</p>
    </div>

    <!-- 订单确认窗口 -->
    <div class="orderWrapper none" id="orderWrapper">
        <div class="orderHeader">
            <p>订单详情</p>
            <i class="closeBtn" id="orderCloseBtn"></i>
        </div>
        <div class="orderCenter" id="orderListWrapper">
            <ul class="orderList" id="orderList">
                <li class="clearfix" name="orderLi" id="orderLi">
                    <div class="pic">
                        <img src="" name="goodsPic">
                    </div>
                    <div class="title" name="goodsTitle">
                    </div>
                    <div class="controlPanel">
                        <div class="multiIcon">×</div>
                        <div class="number" name="count">1</div>
                        <div  name="addBtn"><i class="addIcon"></i></div>
                        <div  name="minusBtn"><i class="minusIcon"></i></div>
                        <div class="moneyIcon">￥</div>
                        <div class="moneyTotal" name="totalPrice"></div>
                    </div>
                    <div class="deleteBtn">
                        <i class="deleteIcon" name="deleteBtn"></i>
                    </div>
                </li>

            </ul>
        </div>
        <div class="orderFooter">
            <button class="btn1" id="orderConfirmBtn">确认购买</button>
            <p>总价 ￥ <span name="orderTotalPrice">0.0 </span> </p>
            <button class="btn2" id="emptyOrder">放弃购买</button>
        </div>
    </div>

    <!-- 商品分类按钮 -->
    <div class="categoryBtnWrapper">
        <i class="categoryBtn" id="categoryBtn"></i>
    </div>

    <!-- 商品分类窗口 -->
    <div class="categoryWrapper none" id="categoryWrapper">
        <div class="categoryLogo">
            <img>
        </div>
        <ul class="categoryList" id="categoryList">
            <li category-id="all" id="categoryAllBtn" class="checked">所有商品</li>
            <li id="categoryItem"></li>
        </ul>
    </div>

    <!-- 网络订单按钮 -->
    <div class="networkOrder">
        <p>网络订单</p>
        <p>取票入口</p>
    </div>

    <div class="goodsAddAnimation" id="goodsAddAnimation">
        <img>
    </div>

    <script type="text/javascript" src="./js/core.js"></script>
    <script>


        /*
        var flipObj = new flip('flipWrapper', {
            autoFlip: true,
            flipTime: 6,
            currentPage: 0,
            imgs: ['./img/bootstrap-mdo-sfmoma-01.jpg',
                './img/bootstrap-mdo-sfmoma-02.jpg',
                './img/bootstrap-mdo-sfmoma-03.jpg']
        });

        var flipObj2 = new flip('flipWrapper2', {
            autoFlip: true,
            flipTime: 6,
            currentPage: 0,
            imgs: ['./img/bootstrap-mdo-sfmoma-01.jpg',
                './img/bootstrap-mdo-sfmoma-02.jpg',
                './img/bootstrap-mdo-sfmoma-03.jpg']
        });

        var flipObj3 = new flip('flipWrapper3', {
            autoFlip: true,
            flipTime: 6,
            currentPage: 0,
            imgs: ['./img/bootstrap-mdo-sfmoma-01.jpg',
                './img/bootstrap-mdo-sfmoma-02.jpg',
                './img/bootstrap-mdo-sfmoma-03.jpg']
        });
        */
    </script>
</body>
</html>